本系列同步發表於我的 Hashnode 部落格：
Eva Chen | 網頁設計師下班後 (hashnode.dev)

參賽前言

本系列文章目標是學習 CSS 基本知識，並且研究 The State of CSS 中值得令人期待新屬性，讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還會提及一些前端基本知識、版本控制、開發經驗等必要概念，讓新手對於前端開發有全面的認識。

這 30 天我想做什麼？

這 30 天我的方向主要是：

• 自我挑戰：研究新穎的 CSS 屬性

  每年都有的 The State of CSS 統計，討論了許多新提出的 CSS 屬性（例如：color-mix()、:has、max()、min()、clamp()、container query 等等），我覺得很有趣，卻未曾實際深究，我想趁此機會加以了解。

• 作為筆記：供自己日後參考
  延續上一點，將這些新學到的東西統整起來。再來是，過去在學習的時候有些容易混淆的部分，我希望也能藉此機會一起釐清。

• 作為紀念：留下些什麼吧！

  工作了多年，我想留下個紀念，統整這些我所學到的知識，並且透過分享，在網路上留下一些痕跡。

• 幫助他人：讓人跨出學習網頁的第一步
  除了統整好基礎前端與 CSS 知識外，並且上述所說未來能變得實用，且目前瀏覽器支援度還不差的新屬性（支援的瀏覽器>=3），一併整理在所有基礎知識中。這樣想學的人也能一起學到新知識，不用再零零散散地去爬文搜尋。

本系列文章會以 CSS 為主，HTML、Git 等網頁開發概念為輔。

這個主題適合誰閱讀？

• 主要目標族群是完全小白新手。無論你是想要學習網頁成為前端工程師，或是想要了解網頁如何運作的 PM 或設計師，都很適合。

  我會介紹基礎的前端知識，因為我發現有時在開發上，PM、設計師或是業主，容易因為不懂前端或網頁上的 Domain Knowledge，造成上工作上的溝通成本或重工，而這往往只是缺乏了幾個簡單的概念。

• 次要則是已經會了，但是想了解 CSS 新屬性的人。

就讓我們開始這 30 天的前端基礎之旅吧！

文章目錄

（這 30 天內持續更新中）

基礎知識 / 共用觀念

• #01 網頁的基本名詞：UI/UX？切版&切圖？前端&後端？靜態&動態？RWD or Mobile First？

• #02 關於各家瀏覽器，前端必備的小知識：支援度、市佔率、CSS 實驗語法 -webkit-, -moz-... PostCSS Autoprefixer

• #03 人在江湖，版控要有：了解 GIT / GitHub / GitLab / Git Flow

• #04 GIT 實戰練習：GitHub Desktop、GitHub Page 基礎教學

• #05 HTML 基礎語法

• #06 寫一份簡單的 HTML，常用 HTML Tag 總整理

• #06補充 網頁的根、絕對路徑、相對路徑，那些關於路徑的小知識

• #07 CSS 基本語法 & 權重介紹

• #08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

• #09 原生的 CSS 變數，基本與進階應用

• #10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦！

• #11 開始寫 CSS 或程式必須知道的幾個原則：DRY & KISS & YAGNI

• #12 CSS 設計方法與命名建議：OOCSS、SMACSS、BEM、RSCSS

• #71 @scope

• #72 nth-child of S (:nth-child(2 of .highlight))

• #73 偽元素的妙用 ::before、::after：HTML data-...、裝飾性元素、CSS 計數器 counter()

版面編排

• #13 CSS 盒子模型 (Box Model)：border-box & content-box

• #14 Reset CSS！變回你該有的樣子

• #15 網頁使用的單位大解析：px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax

• #16 CSS 數學函式 calc()、max()、min()、clamp()

• #17 CSS block、inline、inline-block：網頁排版的御三家

• #18 CSS Flex：網頁排版的超級寵兒

• #19 CSS Grid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

• #20 CSS 內部尺寸 (Intrinsic Sizing)：min-content、max-content、fit-content

• #21 CSS Position：relative、absolute、fixed、sticky 找到適合的定位

• #22 CSS display: contents：製作 JS Components 時的好東西！

• #23 CSS 邏輯屬性 Logical properties 與 Writing modes

• #74 CSS Anchor Positioning (Tab 動畫, tooltip)

響應式 RWD

• #24 RWD & CSS Media Queries & iOS Safari 上的經驗談

• #25 CSS 列印的小技巧：@media print、break-before/after/inside、@page

• #26 CSS Container Queries 容器查詢：隨著自己變大變小變畫面

文字

• #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

• #28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用

• #29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

• #75 text-wrap: balance / pretty

• #76 text-box-trim / text-box-edge

顏色

• #31 CSS 顏色設定：基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()

• #32 CSS currentcolor、accent-color 與混色的 color-mix() 讓規劃色彩系統好方便！

• #33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數

• #77 light-dark() / color-scheme

多媒體：圖片/影片/音訊處理

• #34 CSS 讓圖片填滿容器的各種方法，以圓形大頭貼為例：object-fit 與 background-size，搭配 aspect-ratio

• #35 圖片的 1x, 2x, 3x 是什麼？關於網頁上圖片解析度的處理：HTML srcset、CSS image-set() 與 @media resolution

• #36 HTML 用影片當背景，使用 iframe 嵌入 Youtube/ IG/ TikTok/ X (Twitter) 影片

繪製漸層與圖形

• #37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

• #38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

• #39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

• #40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

• #41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)

• #42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)

• #43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片

• #44 CSS 邊框 border 與各種花式邊框的小技巧：borde-image、outline、box-shadow

• #78 CSS 三角函數 sin() cos() (繞著圓周、面對方向永遠正面、改變顏色)

特效

• #45 CSS 中的半透明遮罩 mask，實現各種模糊邊緣特效

• #46 CSS 濾鏡 filter/ backdrop-filter：模糊、透明圖片加陰影、調色、毛玻璃、漸進式模糊效果

• #47 一次搞懂 CSS 各種混合模式：mix-blend-mode/ background-blend-mode

• #48 CSS 噪點漸層 (Grainy Gradients) 的製作方法 (todo)

• #49 CSS 2D Transform：變大、變小、旋轉、傾斜，CSS 絕對定位置中方法、平行四邊形

• #50 CSS 3D Transform

• #79 純 CSS + SVG - Apple 液態玻璃 Liquid Glass 效果

互動 - Transition

• #51 CSS Transition 與一些小技巧：倒帶、影響相鄰的兄弟 (todo hover 巢狀冒泡效果)

• #52 詳細了解 CSS 各種偽類：hover、focus、active、focus-within、focus-visible、target

• #80 transition-behavior: allow-discrete

互動 - Animation

• #53 CSS Animation (todo 逐格動畫 打字動畫 動畫暫停)

• #54 網頁渲染動畫的建議 & will-change 的使用時機

• #55 純 CSS 照片淡入淡出輪播動畫

• #56 純 CSS 跑馬燈動畫，單趟跑、無限跑、要暫停都可以

• #57 CSS @property：變數的再進化！輕易製作純 CSS 漸層動畫、圓餅圖動畫

• #58 CSS offset-path：沿著軌跡行進動畫

互動 - click toggle 行為

• #59 客製化 radio、checkbox 樣式，製作開關按鈕 (Switch Button)

• #60 利用 checkbox，做到純 CSS 開關網頁選單、收合側邊欄

• #61 利用 checkbox/ radio 與 CSS grid，做到純 CSS FAQ 開合選單（Collapse 折疊 / Accordion 手風琴效果）

互動 - scroll 行為

• #62 使用 CSS overflow 自訂捲動範圍

• #63 CSS 自訂捲軸顏色與樣式：scrollbar-color、scrollbar-width、scrollbar-gutter、::-webkit-scrollbar-*

• #64 CSS 捲動提示陰影：使用 CSS 漸層 radial-gradient 與 isolation 製作

• #65 CSS 簡易的滑順捲軸滾動動畫 scroll-behavior

• #66 CSS :target / ::target-text —— 在滾動時，強調 hash 連結的目標

• #67 CSS :target 應用：純 CSS 光箱、純 CSS Tab 頁籤

• #68 CSS overscroll-behavior：解決滾動穿透問題 & 阻止手機瀏覽器下拉重整

• #69 CSS scroll snap 做簡單的純 CSS 輪播

• #70 純 CSS 視差捲動 animation-timeline

Sass/SCSS (CSS 預處理器)

• #81 SCSS 介紹與簡易環境設定

• #?? SCSS 基本寫法 Variables / Nesting

• #?? SCSS 使用檔案管理樣式 Partials / Modules (@use & 舊版 @import 說明)

• #?? Mixins @mixin and @include

• #?? Extend

• #?? SCSS 運算符

• #?? SCSS 邏輯 @if, @each, @for, and @while

• #?? 函式 (Functions) - 打造你自己的工具箱

CSS 框架初探

• #?? 原子設計 - 大多數框架所遵循的原則

• #?? Tailwind CSS

• #?? Bootstrap

• #?? 其他介紹（shadcn/Ant Design/Materialize CSS/Bulma/Open Props/UnoCSS/Foundation)

SEO 與其他實用工具

• #?? SEO 基本概念：語意化標籤、Open Graph、結構化資料

雜記

• 2023 鐵人賽開始：#00 參賽前言 / 文章目錄（本篇）

• 2023 鐵人賽結束：#30 iT 鐵人賽心路歷程 & 我的寫作方法

• 2024 鐵人賽開始：#00 PART 2！參賽前言 / 文章目錄

• 2025 鐵人賽開始：#00 PART 3！參賽前言 / 文章目錄

• #?? 真結局，感言